<template>
  <div>
    <div class="result-table-head">
      <div class="order-list">
        <el-button class="entry-Orders" type="danger" @click="onPendingOrder">挂单</el-button>
        <div class="title">最新挂单</div>
        <div class="list">
          <div>感冒药 2020</div>
          <div>总价：20元 数量：5 品种：5</div>
        </div>
      </div>
      <div class="result-button">
        <div class="settlement-button-box">
          <el-button class="el-button-table" type="warning">直挂</el-button>
          <el-button class="el-button-table" type="primary">废单</el-button>
        </div>
        <div class="settlement">结单</div>
      </div>
    </div>

    <el-table
      :data="tableData"
      height="500"
      highlight-current-row
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="80" />
      <el-table-column prop="name" label="商品名称" />
      <el-table-column prop="code" label="商品编号" />
      <el-table-column prop="price" label="零售价" />
      <el-table-column prop="vipPrice" label="会员价" />
      <el-table-column prop="amount" label="数量" />
      <el-table-column prop="total" label="小计" />

      <el-table-column fixed="right" label="操作" min-width="80">
        <template #default="scope">
          <el-button type="danger" size="small" @click.prevent="deleteRow(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="total">
      <div>
        <div>共<span class="totol-price red">300.00</span> 元</div>
        <div>优惠<span class="red">0</span>元</div>
      </div>

      <div class="goods-list">
        <div class="itme">
          <div>共2个商品</div>
          <div>医保:20元</div>
        </div>
        <div class="itme red">
          <div>现金:36</div>
          <div>特价：10</div>
        </div>
      </div>

      <div class="arrow-right">
        <el-icon class="icon"><ArrowUpBold /></el-icon>
        <el-icon class="icon"><ArrowDownBold /></el-icon>
      </div>
    </div>

    <pending-order ref="refPendingOrder" title="系统挂单"></pending-order>
  </div>
</template>

<script lang="ts" setup>
import { h, ref, type VNode, reactive, toRefs } from 'vue'
import { ElTable, type TableColumnCtx } from 'element-plus'
import pendingOrder from '@/views/cashier-desk/components/diaglog/pending-order.vue'

import hotkeys from 'hotkeys-js'
const productCode = ref('')
const refPendingOrder = ref('')

interface Goods {
  id: string
  name: string
  code: string
  price: string
  vipPrice: string
  amount: string
  total: string
}
interface SummaryMethodProps<T = Goods> {
  columns: TableColumnCtx<T>[]
  data: T[]
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<Goods[]>([])

const toggleSelection = (rows?: Goods[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: Goods[]) => {
  multipleSelection.value = val
}

const stata = reactive({
  tableData: [
    {
      id: '344',
      name: '感冒药231312soadjoia',
      code: '20903909',
      vipPrice: '26.00',
      price: '30.00',
      amount: '1',
      total: '26.00'
    },
    {
      id: '366',
      name: '感冒药23492834',
      code: '20903909',
      vipPrice: '26.00',
      price: '30.00',
      amount: '1',
      total: '26.00'
    }
  ]
})
const { tableData } = toRefs(stata)

//全部添加
const setTableData = (data: []) => {
  tableData.value = [...tableData.value, ...data]
}

//全部删除
const removeSelectionAll = () => {
  console.log('===========全部删除================')
  tableData.value = []
}

//删除行
const deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
}

//挂单
const onPendingOrder = () => {
  refPendingOrder.value.show()
}

defineExpose({
  setTableData,
  removeSelectionAll
})

//键盘处理
hotkeys('ctrl+a,ctrl+b,r,f,enter', function (event, handler) {
  switch (handler.key) {
    case 'ctrl+a':
      alert('you pressed ctrl+a!')
      break
    case 'ctrl+b':
      alert('you pressed ctrl+b!')
      break
    case 'r':
      alert('you pressed r!')
      break
    case 'f':
      alert('you pressed f!')
      break
    case 'enter':
      alert('you pressed enter!')
      break
  }
})
</script>

<style lang="scss" scope>
.result-table-head {
  width: 100%;
  padding: 10px;
  justify-content: space-between;
  background: #fff;
  margin-bottom: 10px;
  box-sizing: border-box;
  display: flex;
  .order-list {
    width: 70%;
    box-sizing: border-box;
    height: 100px;
    overflow: hidden;
    .title {
      padding-bottom: 5px;
      font-size: 14px;
    }
    .entry-Orders {
      margin-bottom: 10px;
    }
  }
  .result-button {
    display: flex;
    width: 40%;
    box-sizing: border-box;
    .settlement-button-box {
      width: 100%;
      padding-top: 10px;
      .el-button-table {
        display: block;
        width: 100px;
        margin: 0 auto 20px;
      }
    }
  }
  .settlement {
    width: 200px;
    height: 100px;
    background: #f73131;
    color: #fff;
    margin-left: 20px;
    line-height: 100px;
    font-size: 24px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
  }
}

.total {
  display: flex;
  justify-content: space-between;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  height: 110px;
  margin: 10px auto;
  padding: 30px 10px 10px;
  font-size: 14px;
  .totol-price {
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 10px;
  }
  .red {
    color: #f73131;
  }
  .goods-list {
    position: relative;
    min-width: 150px;
    max-width: 80%;
    .itme {
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      font-size: 14px;
    }
  }
  .arrow-right {
    width: 30px;
    .icon {
      font-size: 24px;
      display: block;
      cursor: pointer;
    }
  }
}
</style>
